<template>
  <div class="city-ranking">
    <table>
      <thead>
        <tr>
          <th>排名</th>
          <th>城市名称</th>
          <th>综合评价</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in cityRankings" :key="item.cityName">
          <td class="rank">{{ index + 1 }}</td>
          <td class="city-name">{{ item.cityName }}</td>
          <td class="rating">
            <el-rate v-model="item.rating" :colors="colors">
            </el-rate>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<style scoped>

body {
  font-family: 'Roboto', sans-serif;

}

table {
  width: 100%;
  font-family: 'Roboto', sans-serif;
  color: #ddd;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

th {

  font-weight: bold;
}


td:first-child {
  text-align: center;
}

td:nth-child(3) {
  min-width: 100px;
}



.city-ranking {
  max-width: 600px;
  margin: auto;
}

.rank {
  font-weight: bold;
}

.city-name {
  font-weight: bold;
}

.rating {
  display: flex;
  justify-content: center;
}
</style>


<script>


export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  name: 'CityRanking',
  data() {
    return {
      cityRankings: [
        { cityName: '南京市', rating: 5 },
        { cityName: '苏州市', rating: 4 },
        { cityName: '徐州市', rating: 3 },
      ]
    }
  },
  mounted() {

  },
  beforeDestroy() {

  },
  methods: {
    initChart() { },

  }
}
</script>